<!--
 * @Description: 应用页面
 * @Author: wangfuwei
 * @Date: 2020-12-11 10:04:35
 * @LastEditors: wangfuwei
 * @LastEditTime: 2020-12-24 10:29:29
 * @FilePath: /horizon-frontend/src/views/apps/index.vue
-->
<template>
  <a-spin :spinning="loading">
    <div :style="{ width: '100%', padding: '20px 50px 0 20px' }">
      <!-- 没有应用列表时展示无权限页面 -->
      <div v-if="cloudApps.length === 0" class="noApp">
        <img class="noAppImage" :src="imageAppNone" />
        <p class="noAppInfo">{{ $t("apps.nopermission") }}</p>
      </div>
      <div v-else>
        <template v-for="cloud in cloudApps">
          <div class="block-item" :key="cloud.fdId" v-if="cloud.children && cloud.children.length">
            <!-- 应用组名称 -->
            <div class="block-name" :style="`background:url(${cloud.picture || bg}) top center no-repeat; background-size:cover`">
              <div class="block-text">{{ $t(`${cloud.fdId}.name`) }}</div>
            </div>
            <!-- 应用组下应用 -->
            <div class="application-wrap">
              <div v-for="app in cloud.children" class="application-item" @click="toApp(app)" :key="app.fdId" :title="$t(`${app.fdId}.description`)">
                <div class="application-cont">
                  <img class="app-img" :src="app.picture || appImg" />
                  <div class="app-info">
                    <!-- 应用名称 -->
                    <div class="app-name">{{ $t(`${app.fdId}.name`) }}</div>
                    <div class="app-desc">{{ $t(`${app.fdId}.description`) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </a-spin>
</template>
<script>
import bg from "@/assets/images/appbg.png";
import app from "@/assets/images/app.png";
import imageAppNone from "@/assets/images/image-app-none.png";
import { appMixin } from "@/utils/mixin";
export default {
  name: "apps",
  mixins: [appMixin],
  data() {
    return {
      bg: bg,
      appImg: app,
      imageAppNone,
      loading: false,
    };
  },
  methods: {
    toApp(app) {
      this.$router.push({
        path: `/${app.home}`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
//无权限
.noApp {
  text-align: center;
  margin-top: 100px;
  .noAppImage {
    width: 380px;
    height: 260px;
  }
  .noAppInfo {
    font-size: 18px;
    font-weight: 400;
    color: #8c98a9;
  }
}
.block-item {
  display: flex;
  align-items: stretch;

  .block-name {
    width: 108px;
    flex-shrink: 0;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
  }
  .block-text {
    width: 100%;
    height: 100%;
    padding: 8px;
    background: rgba(39, 57, 85, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 17px;
    line-height: 25px;
    color: #bfc4cd;
    font-weight: 600;
  }
  .application-wrap {
    display: flex;
    flex-wrap: wrap;
  }
  .application-item {
    width: 284px;
    height: 110px;
    border-radius: 4px;
    background-color: #fff;
    color: #000;
    margin: 0 0 20px 20px;
    padding: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgba(57, 75, 115, 0.08);
  }
  .application-item:hover {
    box-shadow: 0 1px 16px 0 rgba(57, 75, 115, 0.25);
  }
  .application-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    .app-img {
      display: block;
      width: 48px;
      height: 48px;
      margin-right: 12px;
      border-radius: 6px;
    }
    .app-name {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      line-height: 24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 180px;
      margin-bottom: 8px;
    }
    .app-desc {
      font-size: 12px;
      font-weight: 500;
      color: #999;
      line-height: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 180px;
    }
  }
}
</style>
